<template>
    <div>
        <common-gallery :imgs="galleryImgs" v-show="show" @close="handlegalleryclose"></common-gallery>
        <router-link to="/" class="iconfont back-icon">&#xe624;</router-link>
        <div class="banner" @click="Handlebannerclick">
            <img class="banner-img" :src="bannerImg" />
            <div class="banner-info">
                <div class="picture">
                    <span class="iconfont">&#xe67b;</span>
                    <span class="number">{{galleryImgs.length}}</span>
                </div>
                <div class="banner-title">{{this.sightName}}</div>
            </div>
        </div>
    </div>
</template>

<script>
import CommonGallery from 'common/Gallery/gallery'
export default {
  name: 'banner',
  components: {
    CommonGallery
  },
  props: {
    sightName: String,
    bannerImg: String,
    galleryImgs: Array
  },
  data () {
    return {
      show: false
    }
  },
  methods: {
    Handlebannerclick () {
      this.show = true
    },
    handlegalleryclose () {
      this.show = false
    }
  }
}
</script>

<style scoped lang="stylus">
    .banner
      position: relative
      height:0;
      padding-bottom: 55%
    .back-icon
        display: block
        font-size: 0.36rem
        position: absolute
        top: 0
        left: 0
        height: 0.72rem
        width: 0.72rem
        background: rgba(0, 0, 0, 0.4)
        border-radius: 50%
        text-align: center
        line-height: 0.7rem
        color: white
        margin: 0.1rem 0 0 0.1rem
        font-weight: bold
        z-index: 100
      .banner-img
        width: 100%
      .banner-info
        position: absolute
        left: 0
        bottom: 0
        right: 0
        padding: 0 0 0.35rem 0.18rem
        background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8))
        .picture
          height:0.4rem
          background-color: rgba(0, 0, 0, 0.5)
          width: 1.2rem
          text-align: center
          line-height: 0.5rem
          margin-bottom: 0.15rem
          border-radius: 0.2rem
        .banner-title
          color: #ffffff
          font-size: 0.36rem
        .iconfont
          color: #ffffff
          font-size: 0.24rem
        .number
          color: #ffffff
          font-size: 0.24rem
</style>
